/**
 * Created by Administrator on 2017/10/11.
 */

import React from 'react';
import css from './index.less';
import { observer } from 'mobx-react';
import PropTypes from 'prop-types';
import ContentEditable from 'react-contenteditable';
import { Icon } from 'antd';

@observer
export default class TextRender extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      html: '<span>请输入文字</span>',
    };
  }

  static propTypes = {
    mod: PropTypes.object,
  };


  handleChange(evt) {
    this.setState({html: evt.target.value});
  }

  isDelete() {
    const { delArea = () => {}, ind } = this.props;
    delArea(ind);
  }
  mouseDown() {
    const { mouseDown = () => {}, ind} = this.props;
    mouseDown(ind);
  }

  render() {
    const { mod, isActive } = this.props;

    const wrapperProps = {
      className: css.wrapper,
      style: mod.styleWrapper,
      onMouseDown: this.mouseDown.bind(this),
    };
    const textProps = {
      className: css.text,
      style: mod.styleText,
    };
    return (
      <div {...wrapperProps}>
        { isActive &&
        <Icon type="close-circle-o" className={css.delete} onClick={this.isDelete.bind(this)} />
        }
        <ContentEditable
          {...textProps}
          html={this.state.html} // innerHTML of the editable div
          disabled={false}       // use true to disable edition
          onChange={this.handleChange.bind(this)} // handle innerHTML change
        />
      </div>
    );
  }
}
